<template>
  <div>
    <div class="list">
      <div class="searcharea">
        <div class="inparea">
          <div class="fangdajing">
            <img class="fdjicon" :src="fangdajing" alt="" />
          </div>
          <input
            class="inp"
            v-model="keyword"
            type="text"
            style=""
            placeholder="请输入搜索关键词"
          />
          <el-button type="primary" @click="goSearch">搜索</el-button>
        </div>
        <el-button type="info" @click="clearkeyword">重置</el-button>
      </div>
      <div class="selectArea">
        <span style="margin-right: 5px">宴会场景:</span>
        <div style="width: 200px">
          <el-select
            v-model="yanhui"
            @change="changeyanhui()"
            placeholder="请选择宴会场景"
            style="width: 100%"
          >
            <el-option label="【空】" value=""></el-option>
            <el-option
              v-for="item in yanhuis"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <template v-if="yanhui">
          <span style="margin-right: 5px; margin-left: 10px">宾客场景：</span>
          <div style="width: 200px">
            <el-select
              v-model="binke"
              @change="changeChildren()"
              placeholder="请选择宾客场景"
              style="width: 100%"
            >
              <el-option label="【空】" value=""></el-option>
              <el-option
                v-for="item in childrens"
                :key="item.chats"
                :label="item.chats"
                :value="item.chats"
              ></el-option>
            </el-select>
          </div>
        </template>
      </div>
      <div class="typeArea">
        <div
          v-for="(item, id) in typeList"
          :key="id"
          class="typeList"
          :style="{
            color: selTypeId == id ? '#fff' : '#ccc',
            background: selTypeId == id ? '#74A3F5' : '#fff',
          }"
          @click="changeselTypeId(id)"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- <div class="resultItem"> -->
      <div class="result">
        <div class="loading" :style="{ display: isLoading ? 'block' : 'none' }">
          加载中
        </div>
        <div v-for="item in resList" :key="item.tid" class="resultItem">
          <template v-if="selTypeId == 3">
            <img
              @click="editText(item)"
              style="position: absolute; top: 4px; left: 5px; width: 25px"
              :src="editsrc"
              alt=""
            />
            <el-popconfirm
              @confirm="del(item.tid)"
              @cancel="cancel"
              confirm-button-text="确认"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
            >
              <img
                slot="reference"
                style="position: absolute; top: 4px; right: 5px; width: 25px"
                :src="delred"
                alt=""
              />
            </el-popconfirm>
          </template>
          <div @click="sendMesage(item.tid, item.content,item.binke,item.yanhui)" class="texts">{{item.binke}}{{item.yanhui}}
            {{ item.content }}
          </div>
          <p class="used" style="">
            <span
              style="margin-left: 20px"
              :style="{ color: item.useNum >= 500 ? 'red' : '#8D8D8D' }"
              >近30天已用:{{ item.usetime }}</span
            >
          </p>
          <div @click="selected(item.tid, item.isfav)" class="sel">
            <img :src="xinsel" v-if="item.isfav" alt="" />
            <img :src="xin" v-else alt="" />
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[9]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="请修改内容"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <textarea
        class="textarea"
        v-model="editcontent"
        name=""
        id=""
        cols="30"
        rows="10"
      ></textarea>
      <div class="selectArea">
        <span style="margin-right: 5px">宴会场景:</span>
        <div style="width: 200px">
          <el-select
            v-model="alertyanhui"
            @change="changeAlertyanhui()"
            placeholder="请选择宴会场景"
            style="width: 100%"
          >
            <el-option label="【空】" value=""></el-option>
            <el-option
              v-for="item in yanhuis"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <template v-if="alertyanhui">
          <span style="margin-right: 5px; margin-left: 10px">宾客场景：</span>
          <div style="width: 200px">
            <el-select
              v-model="alertbinke"
              placeholder="请选择宾客场景"
              style="width: 100%"
            >
              <el-option label="【空】" value=""></el-option>
              <el-option
                v-for="item in alertChildrens"
                :key="item.chats"
                :label="item.chats"
                :value="item.chats"
              ></el-option>
            </el-select>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//请求
import {
  getwenankuData,
  delwenankuData,
  getShoucangData,
  getTypeList,
  usetitashuo,
  partyclass,
  shouChang,
  addwenankuData,
} from "@/api/dtsApi";
import bus from "@/utils/bus";
export default {
  data() {
    return {
      fangdajing: require("@/assets/img/搜索.png"),
      xin: require("@/assets/img/爱心.png"),
      xinsel: require("@/assets/img/爱心选中.png"),
      delred: require("@/assets/img/del-red.png"),
      editsrc: require("@/assets/img/edit.png"),
      partys: [],
      keyword: "",
      currentPage: 1,
      pageSize: 9,
      yanhui: "",
      alertyanhui: "",
      yanhuis: [],
      binke: "",
      alertbinke: "",
      childrens: [],
      alertChildrens: [],
      partys: [],
      total: 0,
      eplatformid: localStorage.getItem("eplatformid"),
      typeList: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "常用",
        },
        // {
        //   id: 2,
        //   name: "收藏",
        // },
        {
          id: 3,
          name: "我的上传",
        },
      ],
      selTypeId: 0,
      resList: [],
      dialogVisible: false,
      editId: null,
      editcontent: null,
      isLoading: false,
    };
  },
  methods: {
    clearkeyword() {
      this.keyword = "";
      this.yanhui = "";
      this.binke = "";
      this.currentPage = 1;
      this.getData();
    },
    changeselTypeId(id) {
      this.selTypeId = id;
      this.currentPage = 1;
      this.getData();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    changeChildren() {
      this.getData();
    },
    goSearch() {
      let page = 1;
      let that = this;
      this.currentPage = page;
      let pageSize = this.pageSize;
      let keyword = this.keyword;
      let yanhui = this.yanhui;
      let binke = this.binke;
      let selTypeId = this.selTypeId;
      let creator = selTypeId == 3 ? this.eplatformid : "";
      let orderby = selTypeId == 0 ? "creattime" : "usetime";
      let data = {
        pageSize,
        page,
        keyword,
        yanhui,
        binke,
        orderby,
        creator,
      };
      getwenankuData(data).then((res) => {
        that.resList = res.data;
        that.total = res.count;
      });
    },
    getData() {
      this.isLoading = true;
      let pageSize = this.pageSize;
      let page = this.currentPage;
      let keyword = this.keyword;
      let yanhui = this.yanhui;
      let binke = this.binke;
      let selTypeId = this.selTypeId;
      let creator = selTypeId == 3 ? this.eplatformid : "";
      let that = this;
      let orderby = selTypeId == 0 ? "creattime" : "usetime";
      if (selTypeId != 2) {
        let data = {
          limit: pageSize,
          page: page,
          keyword,
          orderby,
          yanhui,
          binke,
          creator,
        };
        getwenankuData(data)
          .then((res) => {
            that.resList = res.data;
            that.total = res.count;
            that.isLoading = false;
          })
          .catch((err) => {
            that.isLoading = false;
            console.log(err);
          });
      } else {
        let data = {
          username: this.eplatformid,
        };
        var urlencoded = new URLSearchParams();
        urlencoded.append("data", JSON.stringify(data));
        getShoucangData(urlencoded)
          .then((res) => {
            that.resList = res.zanlist;
            that.total = res.count;
            that.isLoading = false;
          })
          .catch((err) => {
            that.isLoading = false;
            console.log(err);
          });
      }
    },
    changeyanhui() {
      let partys = this.partys;
      let yanhui = this.yanhui;
      this.binke = "";
      let guestsIndex = partys.findIndex((item) => item.partyName == yanhui);
      console.log(guestsIndex);
      if (guestsIndex >= 0) {
        this.childrens = partys[guestsIndex].guests;
      }
      this.getData();
    },

    changeAlertyanhui() {
      let partys = this.partys;
      let alertyanhui = this.alertyanhui;
      this.binke = "";
      let guestsIndex = partys.findIndex(
        (item) => item.partyName == alertyanhui
      );
      console.log(guestsIndex);
      if (guestsIndex >= 0) {
        this.alertChildrens = partys[guestsIndex].guests;
      }
    },
    changeAlertbinke() {},
    /**
     * 使用文档并加1
     */
    sendMesage(tid, text,binke,yanhui) {
      let that = this;
      let eplatformid = this.eplatformid;
      var data = {
        act: "add",
        tid,
        username: eplatformid,
      };
      usetitashuo(data).then((res) => {
        if (res == "success") {
          that.getData();
        }
      });
      var obj = {
        text,binke,yanhui
      }
      bus.$emit("sendMesage", obj);
    },
    del(tid) {
      let that = this;
      let tiddata = new FormData();
      tiddata.append("tid", tid);
      if (this.resList.length === 1) {
        //arr.length 当前页的数组(数据)长度
        this.currentPage = this.currentPage - 1 || 1;
      }
      delwenankuData(tiddata).then((res) => {
        if (res.ok) {
          that.$message.success("删除成功");
          that.getData();
        }
      });
    },
    cancel() {},
    /**
     * 修改
     */
    editText(item) {
      this.dialogVisible = true;
      this.editId = item.tid;
      this.editcontent = item.content;
      console.log(item);
    },
    handleClose() {
      this.dialogVisible = false;
      this.editcontent = null;
    },
    confirmEdit() {
      this.dialogVisible = false;
      let yanhui = this.alertyanhui;
      let binke = this.alertbinke;
      let content = this.editcontent;
      let creator = this.eplatformid + "";
      let tid = this.editId;
      let msg = {
        act: "edit",
        tid,
        content,
        binke,
        yanhui,
        creator,
      };
      console.log(msg);
      var formdata = new FormData();
      formdata.append("data", JSON.stringify(msg));
      addwenankuData(formdata).then((res) => {
        if (res.ok) {
          this.currentPage = 1;
          this.$message.success("添加成功");
          this.getData();
        }
      });
      this.editcontent = null;
    },
    /**
     * 收藏文案
     */
    selected(id, isfav) {
      let that = this;
      let eplatformid = this.eplatformid;
      let todo = isfav ? "delete" : "add";
      var data = {
        act: todo,
        tid: id,
        username: eplatformid,
      };
      shouChang(data).then((res) => {
        console.log(res);
        if (res == "success") {
          isfav ? that.$message("取消收藏") : that.$message.success("收藏成功");
          that.getData();
        }
      });
    },
  },
  created() {
    let that = this;
    partyclass().then((response) => {
      var partys = response[0].party;
      let partName = partys.map((item) => item.partyName);
      that.yanhuis = partName;
      that.partys = partys;
    });
    this.getData();
  },
  mounted() {
    bus.$off("addSuccess");
    bus.$on("addSuccess", (msg) => {
      this.currentPage = 1;
      this.$message.success("添加成功");
      this.getData();
    });
  },
};
</script>
<style lang="less" scoped>
.list {
  width: 70vw;
  height: 90vh;
  background: #fff;
  border-radius: 15px;
  margin: 0 10px;
  padding: 10px 30px 10px;
  .searcharea {
    height: 6vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .fangdajing {
      width: 30px;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .fdjicon {
        width: 15px;
        height: 15px;
      }
    }
    .inparea {
      width: 30vw;
      margin: 0 200px;
      background-color: #f2f2f2;
      border-radius: 8px;
      display: flex;
      align-items: center;
      .inp {
        // background-color: red;
        width: calc(30vw - 30px);
      }
    }
  }
  .selectArea {
    display: flex;
    height: 40px;
    align-items: center;
    margin: 0 50px;
  }
  .typeArea {
    line-height: 10px;
    height: 40px;
    font-size: 18px;
    margin: 10px 50px;
    .typeList {
      width: 10vw;
      text-align: center;
      overflow: hidden;
      cursor: pointer;
      height: 50px;
      line-height: 50px;
      border-radius: 25px;
      border: 1px solid #ccc;
      display: inline-block;
    }
  }
  .result {
    margin: 0 50px;
    height: 60vh;
    position: relative;

    .loading {
      position: absolute;
      z-index: 200;
      height: 62vh;
      width: 100%;
      font-size: 50px;
      color: #0075ff;
      text-align: center;
      // top: 3vh;
      line-height: 60vh;
      background-color: #000000;
      opacity: 0.6;
    }
  }
  .resultItem {
    width: 30%;
    height: 20vh;
    font-size: 14px;
    z-index: 0;
    display: inline-block;
    position: relative;
    border: 3px solid #f2f2f2;
    padding: 10px;
    margin: 5px;
    cursor: pointer;
    .texts {
      white-space: pre-wrap;
      margin: 2vh 2vh 0;
      height: 17vh;
      width: 15vw;
      line-height: 3vh;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
    }
    .used {
      position: absolute;
      bottom: 0px;
      width: 100%;
      left: -2px;
      height: 30px;
      line-height: 22px;
      cursor: default;
      // background:red;
      background: #fff;
    }
    .sel {
      position: absolute;
      bottom: 4px;
      right: 5px;
    }
  }
  .result .resultItem:nth-child(3n + 1) {
    border-left-width: 0;
    border-top-width: 0;
  }
  .result .resultItem:nth-child(3n + 2) {
    border-left-width: 0;
    border-top-width: 0;
  }
  .result .resultItem:nth-child(3n) {
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
  }
  .result .resultItem:nth-child(7),
  .result .resultItem:nth-child(8),
  .result .resultItem:nth-child(9) {
    border-bottom-width: 0;
  }
}
.pagination {
  height: 8vh;
  background: red;
  display: flex;
  background: #fff;
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  margin: 2vh 0;
  padding-left: 50px;
}
.textarea {
  border: 1px solid #ccc;
  resize: none;
  width: 25vw;
  font-size: 20px;
}
</style>